<script setup lang="ts">
import { useRoute } from 'vue-router'
import SButtonList from '@/components/SButtonList.vue'
import { ElTable } from 'element-plus'
import { useList } from '@/composables/list-composable'
import type { Page, UserFilter, UserVo } from '@/type/User'
import { userListApi } from '@/api/user-api'
import type { ResultData } from '@/api/service'

import defaultAvatar from '@/assets/default-avatar.jpg'
import router from '@/router'
import { ref } from 'vue'
import type { ExportExcelForm } from '@/type/Common'
import STopFilter from '@/components/STopFilter.vue'

const route = useRoute()
const rowButton = route.meta.rowButton
const topButton = route.meta.topButton

const exportDialogVisible = ref<boolean>(false)

const filterForm = ref<UserFilter>({
  createBy: null,
  email: null,
  exportCol: null,
  gmtCreateEnd: null,
  gmtCreateStart: null,
  modifyBy: null,
  nickname: null,
  orderBy: null,
  username: null,
  status: null
})

const exportDialogForm = ref<ExportExcelForm>({
  current: 0,
  exportCol: [],
  fileName: '',
  size: 1000
})

const userColOption = [
  { value: 'userId', label: '用户编号' },
  { value: 'avatar', label: '用户头像' },
  { value: 'username', label: '用户名称' },
  { value: 'nickname', label: '用户昵称' },
  { value: 'sign', label: '用户签名' },
  { value: 'email', label: '用户邮箱' },
  { value: 'status', label: '用户状态' },
  { value: 'gmtCreate', label: '创建时间' },
  { value: 'gmtModify', label: '修改时间' },
  { value: 'createBy', label: '创建人' },
  { value: 'modifyBy', label: '修改人' }
]

const methods = {
  add: () => {
    router.push({ path: '/user/info' })
  },
  edit: (row: UserVo) => {
    router.push({ path: '/user/info', query: { userId: row.userId } })
  },
  search: () => {
    getData()
  },
  export: () => {
    exportDialogVisible.value = true
  }
}

function doExportExcel() {
  exportUserApi(exportDialogForm.value.size, exportDialogForm.value.current, {
    createBy: undefined,
    email: undefined,
    gmtCreateEnd: undefined,
    gmtCreateStart: undefined,
    modifyBy: undefined,
    nickname: undefined,
    orderBy: undefined,
    username: undefined,
    exportCol: exportDialogForm.value.exportCol
  }).then((response: Uint8Array) => {
    const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    let url = window.URL.createObjectURL(blob) // 创建一个临时的url指向blob对象
    // 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
    let a = document.createElement('a')
    a.href = url
    a.download = exportDialogForm.value.fileName
    a.click()
    // 释放这个临时的对象url
    window.URL.revokeObjectURL(url)
    exportDialogVisible.value = false
  })
}

const { tableData, currentChange, total, size, page, pageChange, getData } = useList<UserVo>(() => {
  userListApi(size.value, page.value, filterForm.value).then(
    (response: ResultData<Page<UserVo[]>>) => {
      total.value = response.data.total
      tableData.value = response.data.modelList
    }
  )
})

const collapse = ref<boolean>(true)
</script>

<template>
  <s-top-filter :is-show="collapse" :filter="filterForm">
    <template #header>
      <el-form :inline="true" >
        <el-form-item label="用户名">
          <el-input v-model="filterForm.username" placeholder="username" clearable />
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="filterForm.nickname" placeholder="nickname" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="status" style="width: 100px" clearable>
            <el-option label="正常" :value="0" />
            <el-option label="停用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" type="primary">搜索</el-button>
          <el-button icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </s-top-filter>

  <s-button-list class="s-table" :link="false" :row-data="null" :methods="methods" :button-list="topButton" />

  <el-table
    border
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    class="s-table"
    @current-change="currentChange"
  >
    <el-table-column type="index" width="50" />
    <el-table-column property="avatar" label="头像" width="60">
      <template #default="scope">
        <el-avatar
          size="default"
          :src="scope.row.avatar === '' ? defaultAvatar : scope.row.avatar"
        />
      </template>
    </el-table-column>
    <el-table-column property="username" label="用户名" width="120" />
    <el-table-column property="nickname" label="昵称" width="120" />
    <el-table-column property="status" label="状态" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="email" label="邮箱" width="220" />
    <el-table-column property="sign" label="签名" />
    <el-table-column property="address" label="操作" width="220">
      <template #default="scope">
        <s-button-list link :methods="methods" :row-data="scope.row" :button-list="rowButton" />
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    class="s-table"
    background
    layout="prev, pager, next"
    :page-size="size"
    @current-change="pageChange"
    :total="total"
  />

  <el-dialog v-model="exportDialogVisible" title="导出用户信息" width="800">
    <el-form :model="exportDialogForm" label-width="auto">
      <el-form-item label="当前页">
        <el-input v-model="exportDialogForm.current" />
      </el-form-item>
      <el-form-item label="每页数量">
        <el-input v-model="exportDialogForm.size" />
      </el-form-item>

      <el-form-item label="导出列">
        <el-select v-model="exportDialogForm.exportCol" multiple placeholder="选择列">
          <el-option
            v-for="item in userColOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doExportExcel">导出</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

:deep(.el-collapse) {
  border: none;
}
</style>
